<template>
  <div class="links">
    <myNav></myNav>
    <div class="top">
      <header>
        <site-title :fontSize="2"></site-title>
      </header>
      <div class="content">
        <div class="link-item" v-for="item in linkData" :key="item.url" @click="goTo(item.url)">
					<div class="left">
						<Avatar v-if="item.image" :src="item.image" large="large"/>
						<Avatar v-else :src="linkPicture" large="large"/>
					</div>
					<div class="right">
						<div class="title">
							{{item.title}}
						</div>
						<div class="info">
							{{item.brief}}
						</div>
					</div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <myFooter></myFooter>
    </div>
  </div>
</template>
<script>
import siteTitle from "@components/siteTitle";
import myFooter from "@components/footer";
import myNav from "@components/nav";
import linkPicture from'@/assets/images/link.png';
import { getLink } from '@/api/server.js';

export default {
  name: 'links',
  components: {
    siteTitle,
    myFooter,
    myNav
  },
  data() {
		return {
			linkData: [],
			linkPicture:linkPicture,
		}
  },
	mounted() {
		// this.linkData = [
		// 	{
		// 		title:'百度搜索',
		// 		image:'https://i.loli.net/2017/08/21/599a521472424.jpg',
		// 		brief:'全球最大的中文搜索引擎',
		// 		url:'http://www.baidu.com'
		// 	},
		// 	{
		// 		title:'Ada',
		// 		image:'https://println.org/images/logo512.png',
		// 		brief:'卑微小前端',
		// 		url:'https://www.adaxh.site/more/friend-ship'
		// 	},
		// 	{
		// 		title:'百度搜索',
		// 		image:'',
		// 		brief:'全球最大的中文搜索引擎',
		// 		url:'http://www.baidu.com'
		// 	},
		// 	{
		// 		title:'百度搜索',
		// 		brief:'全球最大的中文搜索引擎',
		// 		url:'http://www.baidu.com'
		// 	},
		// 	{
		// 		title:'百度搜索',
		// 		image:'https://i.loli.net/2017/08/21/599a521472424.jpg',
		// 		brief:'全球最大的中文搜索引擎',
		// 		url:'http://www.baidu.com'
		// 	},
		// 	{
		// 		title:'百度搜索',
		// 		image:'https://i.loli.net/2017/08/21/599a521472424.jpg',
		// 		brief:'全球最大的中文搜索引擎',
		// 		url:'http://www.baidu.com'
		// 	},
		// ];
		getLink().then(res => {
      this.linkData = res.data;
    })
	},
	methods: {
		goTo(url) {
			window.open(url, '_blank');
		}
	},
}
</script>
<style lang="less" scoped>
@import url("../../assets/css/global.less");
.links {
  margin-left: auto;
  margin-right: auto;
  width: 90vw;
  .top {
    padding-top: 5vh;
    height: calc(100vh - 6rem);
    .content {
			padding-top:2rem;
			width:1200px;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			.link-item {
				display: flex;
				flex: 1 1 240px;
				margin:0 20px 20px 0;
				padding: 10px;
				flex-grow: 0;
				cursor: pointer;
				&:hover {
					box-shadow: 0 3px 6px -4px rgb(255, 255 , 255), 0 6px 16px 0 rgb(150, 150, 150);
    			transition: box-shadow .6s,border-color .6s,-webkit-box-shadow .6s;
				}
				.left {
					/deep/ .ivu-avatar {
						width: 60px;
						height: 60px;
					}
				}
				.right {
					padding: 10px 0 0 10px;
					.title {
						// font-weight: 700;
					}
					.info {
						color: @color-auxiliary;
						font-size: .9rem;
					}
				}
			}
    }
  }
}
</style>
